{% extends "pc.master.default.html" %}
{% load i18n %}
{%load encoding%}


{% block include %}
<script type="text/javascript" src="/resources/3th/jquery-jquery-ui-269fcfb/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="/resources/css/sheet.css" type="text/css" />
{% endblock %}


{% block script %}
    $(document).ready(function(){
	
        // 자동완성
        $("#complete").autocomplete({
        source:function(req, add){
                $.getJSON("/code/select/", req, function(data){
                        
                        add($.map(data, function(item){
                                return{
                                        label:"(" + item.code + ")" + item.label,
                                        code:item.code
                                };
                        }));
                        
                });
        },
        focus:function(e, ui){
        },
        //define select handler
        select: function(e, ui) {
                
            $("#complete").val(ui.item.label);
            $("#upper_code").val(ui.item.code);
            
            },

            //define select handler
            change: function() {

                    //prevent 'to' field being updated and correct position
                    //$("#to").val("").css("top", 2);
            }
        }); // end of 자동완성
	
	
	
        $(".buttonBox #query").click(function(){
            var data = "";
            $(".optionBox input").each(function(){
                    
                if ($(this).attr("id")=='super_code' && $("input[name='level']").eq(0).attr("checked") == 'checked'){

                }else{
                    if($(this).val()){
                        var id = $(this).attr("id");
                        
                        if(data != ""){
                                data+=",";
                        }else{
                                data+="{";
                        }
                        data += "'" + id + "':'" + $(this).val() + "'";
                    }
                }
                    
                    
            });
            if(data!=''){
                    data+= "}";
            }
            
            var uri = "/code/list/" + escape($.base64Encode(data));
            
            document.location.href= uri;
                
        }).button({
                icons:{"primary":"ui-icon-search"}
        });
	
	
        $(".buttonBox #regist").click(function(){
            document.location.href = "/code/create";
        }).button({
            icons:{"primary":"ui-icon-plus"}
        }); // end of Button
		
		
        // 엔터처리
        $(".optionBox input[type='text']").keyup(function(e){
            if(e.keyCode==13){
                $("#query").click();
            }
        });
        
        
        $("input[name='level']").click(function(){
            $("#floatButtonBox").remove();
    
            if($(this).val() == 'ALL'){
                $("#complete").val("");
                $("#upper_code").val("");
                $("#manual").removeClass("visible").addClass("hidden");
                $("#query").click();
                    
            }else{
                $("#manual").removeClass("hidden").addClass("visible");
            }
                
        });
		
	
		
        // 플로팅 버튼박스
        var createButtonBox = function(param){
            var div = $(document.createElement("div"));
            div.attr("id", "floatButtonBox");
            
            var anchorInfo = $(document.createElement("a"));
            anchorInfo.attr("href", "#");
            anchorInfo.html("<img src=\"/resources/images/icon/search.png\" />");
            anchorInfo.click(function(){
                var div = $(document.createElement("div"));
                div.attr("title", "Code Info");
                div.load("/code/info/" + param + "?requestType=layer");
                div.dialog({
                    width:600, height:400,
                    modal:true
                });
            });

            anchorEdit = $(document.createElement("a"));
            anchorEdit.attr("href", "#");
            anchorEdit.html("<img src=\"/resources/images/icon/edit.png\" />");
            anchorEdit.click(function(){
                document.location.href = "/code/edit/" + param;    
            });

            anchorDelete = $(document.createElement("a"));
            anchorDelete.attr("href", "#");
            anchorDelete.html("<img src=\"/resources/images/icon/delete.png\" />");
            
            
            div.append(anchorInfo);
            div.append(anchorEdit);
            div.append(anchorDelete);

            return div;
        };
		
		
		
		
        $("#dataBox a").each(function(){
            $(this).hover(function(){
            
                var param = $(this).attr("param");
                // (?P)
        
                $("#floatButtonBox").remove();
                var div = createButtonBox(param);
                /*
                div.find("a").each(function(){
                    var href = $(this).attr("href");
                    href = href.replace(/\(\?P\)/, param);
                    
                    $(this).attr("href", href);
                });
                */
                
                div.attr("name", "floatButtonBox");
                div.css("zIndex", "0");
                div.css("position", "absolute");
                
                var textWidth = $(this).width();
                
                var buffer = 5;
                var totalWidth = $(this).position().left + textWidth + buffer;
                
                
                
                div.css("left", totalWidth + "px");
                div.css("top", $(this).position().top + "px");
                
                
                $(document.body).append(div);
                div.fadeIn("fast", function(){
                    div.css("display","block");
                });
                
                //console.debug(div.attr("id"));
                    
                    
            }, function(){
                
                if($("#floatButtonBox").length > 1){
                    $("#floatButtonBox").remove();
                }
                    
            });
        });
		
		

    $(".live-tile").liveTile();
		
		
		
    });

{% endblock %}

{%block body %}
	
	

	
    <div id="floatButtonBox" class="hidden">
        <a name="infoLayer" href="#">
            <img src="/resources/images/icon/search.png" />
        </a>
        <a href="">
            <img src="/resources/images/icon/edit.png" />
        </a>
        <a href="">
            <img src="/resources/images/icon/delete.png" />
        </a>
    </div>
	
	
	



<div class="content">
    <div>
        <h3>Code Lists</h3>
    </div>
    ************* <br/>
@{% trans "I hate you." %}@
    ************* <br/>
    <div class="optionBox">
        <fieldset>
            <legend>Basic Options</legend>
            <table>
                <tr>
                    <td>Group Code</td>
                    <td>{{group_code}}
                            <!--<input type="text" id="house_code" value="{{house_code|default:''}}"/>
                            --></td>
                </tr>
                <tr>
                    <td>Upper Code</td>
                    <td>
                        <label>
                            {%if upper_code%}
                                    <input type="radio" name="level" value="ALL">
                            {%else%}
                                    <input type="radio" name="level" value="ALL" checked="checked">
                            {%endif%}
                                    Top level
                        </label>
                        <label>
                            {%if upper_code %}
                                    <input type="radio" name="level" value="CHILD" checked="checked" />
                            {%else%}
                                    <input type="radio" name="level" value="CHILD"  />
                            {%endif%}
                                    Typing Manual
                        </label>
                        
                        {% if  complete %}
                        <div id="manual" class="visible">
                            <input type="text"id="complete"  value="{{complete|default:''}}"/>
                            <input type="text" id="upper_code" value="{{upper_code|default:''}}"/>
                        </div>
                        {%else%}
                        <div id="manual" class="hidden">
                            <input type="text"id="complete"  value="{{complete|default:''}}"/>
                            <input type="text" id="upper_code" value="{{upper_code|default:''}}"/>
                        </div>	
                        {%endif%}
                            
                            
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    
    <div class="buttonBox right">
        <button id="query">Query</button>
        <button id="regist">Regist</button>
    </div>
    <div id="dataBox" class="dataBox">
        <table>
            <thead>
                <caption>Code List</caption>
                <tr>
                    <th></th>
                    <th>Code</th>
                    <th>Summary</th>
                    <th>Use</th>
                    <th>Upper Code</th>
                </tr>
            </thead>
            
                    
            <tbody>
    
                {% for data in list%}
                <tr class="{% cycle 'row1' 'row2' %}">
                    <td>{{  data.group.code}}</td>
                    <td><a param="{{data.code|encode|urlencode}}" href="/code/info/{{data.code|encode|urlencode}}"/>{{ data.code}}</a></td>
                    <td>{{  data.description}}</td>
                    <td>{{ data.used}}</td>
                    <td>{{ data.upper_code}}</td>
                </tr>
                {%empty%}
                    <tr><td colspan="5">No datas</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="buttonBox">
        <button id="query">Query</button>
        <button id="regist">Regist</button>
    </div>
</div>

<div class="live-tile">
	    <div>front</div>
	</div>
	

	
{% endblock %}
